<template>
  <div>
    <el-dialog
      title="选择小区位置"
      :visible.sync="isMapShow"
      width="70%"
      :modal="false"
      @close="isMapShow =false"
    >
      <el-amap
        ref="map"
        :vid="'amapDemo'"
        :center="center"
        :plugin="plugin"
        :zoom="zoom"
        :events="events"
        visible
        class="amap-demo"
        style="height:500px; width: 1015px;"
      >
        <el-amap-marker v-for="(u,i) in markers" :key="i" :position="u.position" />
        <el-amap-marker :position="[121.5273285, 31.21515044]" :icon="icon" />
      </el-amap>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'FristMap',
  data() {
    return {
      isMapShow: false,
      center: [117.328991, 31.860817],
      zoom: 20,
      position: [117.328991, 31.860817],
      icon: require('@/assets/定位.png'), // 自定义地图标记点图片
      events: {
        init(o) {
          // console.log(o.getCenter())
        },
        click: e => {
          // console.log(e)
          this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
          this.$emit('mapGps', [e.lnglat.lng, e.lnglat.lat])
        }
      },
      markers: [
        {
          position: [117.328991, 31.860817]
        }
      ],
      // 使用其他组件
      plugin: [
        {
          pName: 'Scale',
          events: {
            init(instance) {
              // console.log(instance)
            }
          }
        },
        {
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log(instance)
            }
          }
        }
      ]
    }
  }
}
</script>

<style>

</style>
